<template>
<div class="footerBox">
  <div>
    <div  @click="thumbsUpBtn"  ><van-icon name="good-job-o"/><p>{{thumbsUpLIst}}</p></div>
    <div  :class="flag?orange:''" @click="addCollection()"><van-icon name="star-o" /><p>收藏</p></div>
  </div>
  <img :src=imgList.imgList alt="">
</div>
</template>

<script>
import {Dialog} from 'vant';
import { Toast } from 'vant';
import {collection} from "@/http/api";
import {conllectionList} from "@/http/api";
import {thumbsUp} from "@/http/api";
import {articleDetails} from "@/http/api";
// import {thumbsUpLIst} from "@/http/api";
export default {
name: "myEssayFooter",
  data(){
  return{
    conllectionList:[],
    flag:false,
    orange:'orange',
    thumbsUpLIst:'',

  }
  },
  props:{
    imgList:[String,Object]
  },
  methods:{
    addCollection(){
      collection(this.$route.query.articleId).then(res=>{
        if(res.data.code==0){
          conllectionList().then(res=>{
            // console.log(res)
            for (const resKey in res.data.rows) {
              // console.log(res.data)
              this.conllectionList.push(res.data.rows[resKey].articleId)
              if(res.data.rows[resKey].articleId==this.$route.query.articleId){
                this.flag=true
                Toast("收藏成功");
                break
              }else {
                this.flag=false
                Toast("已取消收藏");
              }
            }
          })
        }else {
          Dialog.confirm({
            message: '是否前往登录',
          })
              .then(() => {
                this.$router.push('/home/mine')
              })
              .catch(() => {
                Toast('登录才能体验更多功能');
              })
        }

      })
    },
    thumbsUpBtn(){

      thumbsUp(this.$route.query.articleId).then(res=>{
        if(res.data.code==0){
          articleDetails(this.$route.query.articleId).then(res=>{
            // console.log(res.data.data)
            this.thumbsUpLIst=res.data.data.zan
            Toast("点赞+1");
          })
        }else {
          Dialog.confirm({
            message: '是否前往登录',
          })
              .then(() => {
                this.$router.push('/home/mine')
              })
              .catch(() => {
                Toast('登录才能体验更多功能');
              })
        }
      })

    }
  },
created() {
  this.thumbsUpLIst=this.imgList.zan
  conllectionList().then(res=>{
    // console.log(res)
    for (const resKey in res.data.rows) {
      // console.log(res.data)
      this.conllectionList.push(res.data.rows[resKey].articleId)
      if(res.data.rows[resKey].articleId==this.$route.query.articleId){
        this.flag=true

        break
      }else {
        this.flag=false

      }
    }
  })
}
}
</script>

<style scoped lang="less">
.orange{
  color: orange;
}
.footerBox{
  >div:nth-child(1){
    margin: 30px 35px;
    display: flex;
    justify-content: space-between;
    >div{
      display: flex;
      font-size: 20px;
      border: 1px solid rgba(240, 240, 240, 1);
      width: 112px;
      height: 37px;
      padding-left: 30px;;
      border-radius: 25px;
      line-height: 37px;
      .van-icon{
        line-height: 36px;
      }
    }
  }
  >img{
    width: 100%;
    //height: 156px;
    margin-bottom: 20px;
  }
  >div:last-child{
    margin: 82px 0 24px 0;
    padding: 15px 15px 10px 14px;
    background-color: rgba(244, 245, 247, 1);
    border: 1px solid rgba(255, 0, 0, 0);
    >p{
      margin: 0;
      font-size: 17px;
      text-align: left;
    }
    >div{
      border-bottom: 1px solid #cccccc;
      width: 109%;
      margin: 2px 0;
      margin-left: -14px;
    }
  }

}

</style>